<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sistem Absensi Siswa</title>
    <!-- CSS Bootstrap -->
    <link href="../assets/css/bootstrap.min.css" rel="stylesheet">
    <!-- CSS Kustom -->
    <link href="style.css" rel="stylesheet">
    <style>
        /* CSS tambahan untuk input yang hanya bisa dibaca */
        #nomor_kartu:read-only {
            background-color: #e9ecef; /* Warna latar belakang abu-abu */
            cursor: default;          /* Kursor standar, bukan kursor teks */
        }
    </style>
</head>
<body>
    <div class="container d-flex justify-content-center align-items-center min-vh-100">
        <div class="card text-center shadow-lg attendance-card">
            <div class="card-body">
                <h3 class="card-title mb-3">Sistem Absensi Online</h3>
                <p class="card-text text-muted">PT. Inovasi Pintar Teknologi</p>
                <p class="card-text text-muted">Partner Sekolah Hebat</p>
                
                <!-- Tampilan Jam Digital -->
                <div id="waktu" class="display-4 my-4"></div>
                
                <!-- Kolom Input Nomor Kartu (ditambahkan atribut readonly) -->
                <input type="text" id="nomor_kartu" class="form-control form-control-lg text-center" placeholder="MENUNGGU KARTU..." readonly autocomplete="off">
                
                <!-- Area untuk menampilkan pesan -->
                <div id="pesan" class="mt-4" style="height: 80px;"></div>
            </div>
        </div>
    </div>

    <!-- JavaScript Libraries -->
    <script src="assets/js/jquery-3.7.1.min.js"></script>
    <script>
        $(document).ready(function() {
            // Fungsi untuk selalu fokus pada input field
            function focusInput() {
                $('#nomor_kartu').focus();
            }
            
            focusInput(); // Fokus saat halaman dimuat
            // Jika user tidak sengaja mengklik di tempat lain, fokus akan kembali ke input
            $('body').on('click', focusInput); 

            // Fungsi untuk mengupdate jam secara real-time
            function updateWaktu() {
                var now = new Date();
                var jam = now.getHours().toString().padStart(2, '0');
                var menit = now.getMinutes().toString().padStart(2, '0');
                var detik = now.getSeconds().toString().padStart(2, '0');
                $('#waktu').text(jam + ':' + menit + ':' + detik);
            }
            setInterval(updateWaktu, 1000);
            updateWaktu();

            let timeout;
            // Event listener 'keyup' tetap berfungsi karena RFID reader mensimulasikan pengetikan
            $('#nomor_kartu').on('keyup', function() {
                clearTimeout(timeout);
                const nomor_kartu = $(this).val();
                
                if (nomor_kartu.length > 5) { 
                    timeout = setTimeout(function() {
                        prosesAbsen(nomor_kartu);
                    }, 500);
                }
            });

            function prosesAbsen(nomor_kartu) {
                $('#pesan').html('<div class="spinner-border text-primary" role="status"><span class="visually-hidden">Loading...</span></div>');

                $.ajax({
                    url: 'api/absen.php',
                    type: 'POST',
                    data: { nomor_kartu: nomor_kartu },
                    dataType: 'json',
                    success: function(response) {
                        let alertClass = response.status === 'success' ? 'alert-success' : 'alert-danger';
                        
                        $('#pesan').html(
                            `<div class="alert ${alertClass}">
                                <strong>${response.nama ? response.nama : 'Gagal!'}</strong><br>${response.pesan}
                            </div>`
                        );
                        
                        // Reset input dan fokus kembali setelah 3 detik
                        setTimeout(function() {
                            $('#nomor_kartu').val('');
                            focusInput();
                            $('#pesan').html('');
                        }, 3000);
                    },
                    error: function() {
                        $('#pesan').html('<div class="alert alert-danger mt-3">Terjadi kesalahan saat menghubungi server.</div>');
                         setTimeout(function() {
                            $('#nomor_kartu').val('');
                            focusInput();
                        }, 3000);
                    }
                });
            }
        });
    </script>
</body>
</html>
